<script>
  let activeEffect = null;
  class Dep {
    constructor(value) {
      this.subscribers = new Set();
      this._value = value;
    }
    // 通过get和set设置自动收集依赖、和更新依赖
    get value() {
      this.depend(); //自动执行depend，收集依赖
      return this._value;
    }
    set value(newValue) {
      this._value = newValue;
      this.notify(); //自动执行派发更新， notify
    }

    depend() {
      if (activeEffect) {
        this.subscribers.add(activeEffect);
      }
    }

    notify() {
      this.subscribers.forEach((effect) => effect());
    }
  }

  // 和onAChanged作用一样，自动更新依赖属性
  function watchEffect(effect) {
    activeEffect = effect;
    // 这里就是watchEffect中的监听会默认先执行一次；watch不能执行，必须设置immdiate才能立即执行
    effect(); //首次是 自己执行 触发effect，以后数据发生变化就走notify中触发effect
    activeEffect = null;
  }

  const dep = new Dep("hello");

  watchEffect(() => {
    // dep.depend();
    console.log("effect run", dep.value);
  });
  // 手动执行的更新
  dep.value = "world";
  //   dep.notify();
</script>
